<template>
    <div
        :class="[
    type === 'textarea' ? 'el-textarea' : 'el-input',
    inputSize ? 'el-input--' + inputSize : '',
    {
      'is-disabled': inputDisabled,
      'is-exceed': inputExceed,
      'el-input-group': $slots.prepend || $slots.append,
      'el-input-group--append': $slots.append,
      'el-input-group--prepend': $slots.prepend,
      'el-input--prefix': $slots.prefix || prefixIcon,
      'el-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword
    }
    ]"
        @mouseenter="hovering = true"
        @mouseleave="hovering = false"
    >
        <template v-if="type !== 'textarea'">
            <!-- 前置元素 -->
            <div class="el-input-group__prepend" v-if="$slots.prepend">
                <slot name="prepend"></slot>
            </div>
            <input
                :tabindex="tabindex"
                v-if="type !== 'textarea'"
                class="el-input__inner"
                v-bind="$attrs"
                :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
                :disabled="inputDisabled"
                :readonly="readonly"
                :autocomplete="autoComplete || autocomplete"
                ref="input"
                @compositionstart="handleCompositionStart"
                @compositionupdate="handleCompositionUpdate"
                @compositionend="handleCompositionEnd"
                @input="handleInput"
                @focus="handleFocus"
                @blur="handleBlur"
                @change="handleChange"
                :aria-label="label"
            />
            <!-- 前置内容 -->
            <span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
                <slot name="prefix"></slot>
                <i class="el-input__icon" v-if="prefixIcon" :class="prefixIcon"></i>
            </span>
            <!-- 后置内容 -->
            <span class="el-input__suffix" v-if="getSuffixVisible()">
                <span class="el-input__suffix-inner">
                    <template v-if="!showClear || !showPwdVisible || !isWordLimitVisible">
                        <slot name="suffix"></slot>
                        <i class="el-input__icon" v-if="suffixIcon" :class="suffixIcon"></i>
                    </template>
                    <i
                        v-if="showClear"
                        class="el-input__icon el-icon-circle-close el-input__clear"
                        @mousedown.prevent
                        @click="clear"
                    ></i>
                    <!-- 这里做了增强处理，其他地方和el-input一样 -->
                    <i
                        v-if="showPwdVisible"
                        class="el-input__icon el-input__clear el-input__eye"
                        :class="passwordVisible ? textPasswordCls: passPasswordCls"
                        @click="handlePasswordVisible"
                    ></i>
                    <span v-if="isWordLimitVisible" class="el-input__count">
                        <span class="el-input__count-inner">{{ textLength }}/{{ upperLimit }}</span>
                    </span>
                </span>
                <i
                    class="el-input__icon"
                    v-if="validateState"
                    :class="['el-input__validateIcon', validateIcon]"
                ></i>
            </span>
            <!-- 后置元素 -->
            <div class="el-input-group__append" v-if="$slots.append">
                <slot name="append"></slot>
            </div>
        </template>
        <textarea
            v-else
            :tabindex="tabindex"
            class="el-textarea__inner"
            @compositionstart="handleCompositionStart"
            @compositionupdate="handleCompositionUpdate"
            @compositionend="handleCompositionEnd"
            @input="handleInput"
            ref="textarea"
            v-bind="$attrs"
            :disabled="inputDisabled"
            :readonly="readonly"
            :autocomplete="autoComplete || autocomplete"
            :style="textareaStyle"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="handleChange"
            :aria-label="label"
        ></textarea>
        <span
            v-if="isWordLimitVisible && type === 'textarea'"
            class="el-input__count"
        >{{ textLength }}/{{ upperLimit }}</span>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Input } from "element-ui";
/**
 *
 * el-input组件增强，输入框类型默认为password，默认显示切换类型图标，切换后切换图标会改变
 *
 * 其他用法和el-input一样
 * {Boolean} showPassword 默认为 true
 *
 * {String} type 默认为 password
 *
 * {String} autocomplete 默认为 new-password
 *
 * {String} passPasswordCls 当输入框为密码输入框时右侧按钮图标样式
 *
 * {String} textPasswordCls 当输入框为文本输入框时右侧按钮图标样式
 */
@Component({
    // 继承element-Input
    extends: Input,
    name: "ZbPass"
})
export default class ZbPass extends Vue {
    @Prop({ default: true }) showPassword!: Boolean;
    @Prop({ default: "password" }) type!: String;
    @Prop({ default: "new-password" }) autocomplete!: String;
    // 当showPwdVisible(是否显示切换密码图标)为 true时以下配置有效
    // 当输入框为密码输入框时右侧按钮图标样式
    @Prop({ default: "ico-close-eye" }) passPasswordCls!: String;
    // 当输入框为文本输入框时右侧按钮图标样式
    @Prop({ default: "ico-eye" }) textPasswordCls!: String;
}
</script>

<style scoped lang="scss">
@include ico-list("../images/", "eye", "close-eye");

.el-input__eye {
    @include bg(contain);
    display: inline-block;
    width: 18px;
    margin-right: 5px;
}
</style>
